<!DOCTYPE html>
{% load static %}
<html>

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <style>
    .card {
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
      max-width: 300px;
      margin: auto;
      text-align: center;
      font-family: arial;
    }

    .title {
      color: grey;
      font-size: 18px;
    }

    button {
      border: none;
      outline: 0;
      display: inline-block;
      padding: 8px;
      color: white;
      background-color: #000;
      text-align: center;
      cursor: pointer;
      width: 100%;
      font-size: 18px;
    }

    button:hover,
    a:hover {
      opacity: 0.7;
    }

    .grid-container {
      display: grid;
      grid-template-columns: auto auto auto;
      padding: 10px;
    }

    a:link {
      text-decoration: none;
    }

    a {
      color: white;
    }
  </style>
</head>

<body>



  <div class="grid-container">
    <div class="grid-item">
      <div class="card">
        <img src="{% static "images/admin.png" %}" alt="John" style="width:100%">
        <p class="title">ADMIN</p>
        <p><button><a href="/adminclick">View</a></button></p>
      </div>

    </div>

    <div class="grid-item">
      <div class="card">
        <img src="{% static "images/doctor.png" %}" alt="John" style="width:100%">
        <p class="title">DOCTOR</p>
        <p><button><a href="/doctorclick">View</a></button></p>
      </div>
    </div>

    <div class="grid-item">
      <div class="card">
        <img src="{% static "images/patient.jpg" %}" alt="John" style="width:100%">
        <p class="title">PATIENT</p>
        <p><button><a href="/patientclick">View</a></button></p>
      </div>
    </div>

  </div>
  <!--
  developed By : sumit kumar
  facebook : fb.com/sumit.luv
  youtube : youtube.com/lazycoders
  -->

</body>

</html>
